<template>
  <div>
    <el-form size="medium" >
      <el-form-item>
        <el-input style="width:200px" placeholder="优惠券名称" v-model="pro.name">
          <el-button slot="append" @click="searchData">搜索</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="">
        <el-table
        :key="rk"
        :data="list">
          <el-table-column prop="name" label="优惠券名称"></el-table-column>
          <el-table-column label="优惠内容">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column label="发放总量">
            <template slot-scope="scope">
              {{ scope.row.total_limit_type == 0 ? '不限制' : scope.row.total_limit }}
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间"></el-table-column>
          <el-table-column width="120px" label="操作">
            <template slot-scope="scope">
              <el-button :type="scope.row.checked ? 'primary' : ''" @click="selectItem(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table_footer">
          <el-pagination
            @current-change="changePage"
            class="pages" background hide-on-single-page layout="prev, pager, next" :total="total">
          </el-pagination>
        </div>
        <!-- <div class="table_footer" v-show="list.length > 0">
          <el-button type="primary" @click="outData">选择数据</el-button>
        </div> -->

      </el-form-item>
    </el-form>
    <span class="dialog-footer">
     <el-button @click="outData(false)">取消</el-button>
     <el-button type="primary" @click="outData(true)">确定</el-button>
    </span>
  </div>
</template>

<script>
import {
  getCouponList
} from '@/api/shop/marketing';
export default {
  data() {
    return {
      isLoading:false,
      radio: 1,
      pro:{
        name:''
      },
      proTemp:{},
      list:[],
      //outlist:[],
      page:1,
      size:5,
      total:0,
      rk:1,
      selectlist:[]
    }
  },
  props: {
    data: {
      type: Array,
      default: function(){
        return [];
      }
    },
    limit:{
      type:Number,
      default:0
    }
  },
  created(){
     console.log(this.data)
     
  },
  mounted(){
    this.selectlist = JSON.parse(JSON.stringify(this.data));
    this.searchData();
  },

  methods: {
    init(){
      this.selectlist = JSON.parse(JSON.stringify(this.data));
      this.searchData();
    },
    //搜索数据
    searchData(){
      this.proTemp = Object.assign({},this.pro);
      this.getData();
    },
    //搜索数据本体
    getData(){
      this.isLoading = true;
      getCouponList(this.proTemp,this.page,this.size).then(res => {
        this.isLoading = false;
        let list =res.msg.data;
        list.forEach(a=>{
          delete a.instructions
        })
        this.list = list;
        //筛选哪些数据是传入的已选择数据
        this.list.forEach(e => {
          if(this.selectlist.findIndex(_ => _.id == e.id) > -1){
            e.checked = true;
          }else{
            e.checked = false;
          }
        });
        this.total = res.msg.total;
      });
    },
    //选择单条记录
    selectItem(item){
      if(!item.checked){
          if(this.limit==0||this.selectlist.length < this.limit){
            item.checked = true;
            this.selectlist.push(item);
          }
      }else{
        //移除数据
        item.checked = false;
        this.selectlist.splice(this.selectlist.findIndex(_ => _.id == item.id),1);
      };
      this.rk++;

    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getData();
    },
    //确定选择数据
   outData(type) {
     if (type) {
       this.$emit('outData', this.selectlist);
     } else {
       this.$emit('outData', false);
     }
   }
  }
}
</script>

<style scoped lang="scss">
.product-item{
  display: flex;
  align-items: center;

  img{
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
</style>
